<template>
	<view class="box">
		<view class="header">
			<image :src="msg.user.avater" mode=""></image>
			<view>
				{{ msg.obj.user_id.nickname }}
			</view>
		</view>
		<view class="title">
			{{ msg.obj.title }}
		</view>
		<view class="content">
			{{ msg.obj.content }}
		</view>
		<view class="footer">
			<image v-for="i in msg.obj.images" :src="i" mode=""></image>
		</view>
		<view class="ability">
			<view>
				<!-- help.arr.includes(i._id) ? 'red' : '' -->
				<uni-icons type="heart-filled" size="30" @click="btn(msg.obj._id)" :color="help.arr.includes(msg.obj._id) ? 'red' : ''"></uni-icons>
				<uni-icons type="chat" @click="cover(0)" size="30"></uni-icons>
			</view>
			<view>
				<uni-icons type="redo-filled" size="30"></uni-icons>
			</view>
		</view>
		<view v-if="isShow">
			<input @confirm='add' class="uni-input" v-model="message" placeholder="请输入评论~~~" />
		</view>
		<view class="discuss">
			<view v-for="i in discuss.arr">
				<view class="sculpture">
					<image :src="i.user_id.avater" mode=""></image>
					<view>
						{{ i.user_id.nickname }}
						{{i.pid ? `回复了 ${i.pid.nickname}` : ''}}
					</view>
				</view>
				<view class="froum">
					<view>
						{{ i.content }}
					</view>
					<view>
						<uni-icons type="heart-filled" @click="btnLink(i._id)" :color="likeArr.arr.includes(i._id) ? 'red' : ''" size="30"></uni-icons>
						<uni-icons type="chat" @click="cover(i.user_id._id)" size="30"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import { onLoad } from "@dcloudio/uni-app";
	// 输入框显隐
	let isShow = ref(false)
	// 输入框信息
	let message = ref('')
	// 判断评论用户
	let userIndex = ref('')
	// 评论信息
	const discuss = reactive({
		arr: []
	})
	// 论坛单条数据信息
	const msg = reactive({
		obj: {},
		user:{},
	})
	// 点赞
	const help = reactive({
		arr:[],
	})
	// 用户点赞的评论
	const likeArr = reactive({
		arr:[]
	})
	onLoad((options) => {
		let obj = { ...options }.id + "\"" +"}"+"}"
		let a =  JSON.parse(obj as string)
		msg.obj = a
		uni.request({
			url: 'http://127.0.0.1:3366/zt/ztUser',
			method: 'POST',
			data:{_id:a.user_id._id},
			success({data}) {
				msg.user = data.data[0]
			}
		})
		uni.request({
			url: 'http://127.0.0.1:3366/zt/ztFc',
			method: 'POST',
			data:{forum_id:msg.obj._id},
			success({data}) {
				data.data.forEach(item=>{
					discuss.arr.push(item)
				})
			}
		})
		uni.request({
			url: 'http://127.0.0.1:3366/zt/zan',
			method: 'POST',
			data:JSON.parse(localStorage.getItem("user")),
			success({data}:any) {
				data.data.forEach(item=>{
					help.arr.push(item)
				})
			}
		})
		uni.request({
			url: 'http://127.0.0.1:3366/zt/getZan',
			method: 'POST',
			data:JSON.parse(localStorage.getItem("user")).data,
			success({data}:any) {
				likeArr.arr = data.data
			}
		})
	})

	function cover(value) {
		isShow.value = !isShow.value
		userIndex.value = value
	}

	function add() {
		const commentMsg = {forum_id:msg.obj._id,content:message.value,user_id:JSON.parse(localStorage.getItem("user")).data._id}
		if(userIndex.value){
			commentMsg['pid'] = userIndex.value
		}
		message.value = ""
		isShow.value = false
		userIndex.value = ""
		uni.request({
			url: 'http://127.0.0.1:3366/zt/addCommit',
			method: 'POST',
			data:commentMsg,
			success({data}:any) {
				uni.request({
					url: 'http://127.0.0.1:3366/zt/ztFc',
					method: 'POST',
					data:{forum_id:msg.obj._id},
					success({data}) {
						discuss.arr = data.data
					}
				})
			}
		})
	}
	
	// 论坛点赞
	function btn(idx){
		if(help.arr.includes(idx)){
			help.arr = help.arr.filter(item => item !== idx)
			uni.request({
				url: 'http://127.0.0.1:3366/zt/dropZan',
				method: 'POST',
				data:{user_id:JSON.parse(localStorage.getItem("user")).data._id,forum_id:idx},
			})
		}else{
			help.arr.push(idx)
			uni.request({
				url: 'http://127.0.0.1:3366/zt/addZan',
				method: 'POST',
				data:{user_id:JSON.parse(localStorage.getItem("user")).data._id,forum_id:idx},
			})
		}
	}
	
	// 评论点赞
	function btnLink(idx){
		if(likeArr.arr.includes(idx)){
			uni.request({
				url: 'http://127.0.0.1:3366/zt/dropLike',
				method: 'POST',
				data:{user_id:JSON.parse(localStorage.getItem("user")).data._id,com_id:idx},
				success() {
					likeArr.arr = likeArr.arr.filter(item => item !== idx)
				}
			})
		}else{
			uni.request({
				url: 'http://127.0.0.1:3366/zt/addLike',
				method: 'POST',
				data:{user_id:JSON.parse(localStorage.getItem("user")).data._id,com_id:idx},
				success() {
					likeArr.arr.push(idx)
				}
			})
		}
	}
	
</script>

<style scoped>
	.box {
		width: 100%;
		padding: 10px;
	}

	.title {
		font-size: 30px;
		font-weight: 600;
		margin: 20rpx 0;
	}

	.header {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.header>image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.header>view {
		margin-left: 20rpx;
		font-size: 25px;
		font-weight: 600;
	}

	.content {
		margin: 30rpx 0;
	}

	.footer>image {
		border-radius: 10rpx;
		width: 95%;
	}

	.footer>image:nth-child(2),
	.footer>image:nth-child(3) {
		width: 45%;
		height: 250px;
		margin: 0 10rpx;
	}

	.ability {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
	}

	.ability>view:nth-child(2) {
		margin-right: 35rpx;
	}

	.discuss {
		width: 95%;
	}

	.discuss>view {
		margin: 20rpx 0;
		width: 100%;
	}

	.sculpture {
		display: flex;
		align-items: center;
	}

	.sculpture>image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.sculpture>view {
		font-size: 20px;
		font-weight: 600;
	}

	.froum {
		margin-left: 100rpx;
	}

	.froum>view:nth-child(1) {
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.froum>view:nth-child(2) {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.red{
		color: red;
	}
</style>